<template>
  <!-- 主页 -->
  <div class="home">
    <!-- 头部搜索框 -->
    <van-search v-model="value" shape="round" right-icon='scan' placeholder="请输入搜索关键词" @search="cat">
      <template #left>
        <div @click="cat">
          <img src="../assets/logo.png" alt="" style="width:30px;height:30px;margin-right:5px;">
        </div>
      </template>
    </van-search>
    <div class="center">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="orange">
        <van-swipe-item v-for="(item, index) in list.slice(0,5)" :key="index+'pr'">
          <img v-lazy="lunbo_get(item)" @click="to_shopping(item.goods?item.goods[0]:[])">
        </van-swipe-item>
      </van-swipe>
      <br>

      <!-- 功能选项 -->
      <van-grid :column-num="list.length<4?list.length:4" :gutter="10" :border="false" square>
        <van-grid-item v-for="(item,index) in (list.length%4!=0?list.slice(0,(parseInt(list.length/4))*4):list)"
          :key="index+'x'" @click="to_class(index)">
          <van-image lazy-load :src="my_get_img1(item)" alt="">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <span class="two">{{item.name}}</span>
        </van-grid-item>
      </van-grid><br>

      <!-- 显示前三个分类里面的前四个商品 -->
      <div v-for="(item,index) in (list.length?(list.length>3?list.slice(0,3):list):[])" :key="index+'p'">
        <h4>{{item.name}}</h4>
        <van-grid :column-num="2" :gutter="10" :center="false">

          <van-grid-item
            @click="to_shopping(item.goods?(item.goods[0]?item.goods[0]:$url +'img/redmi9.jpg'):$url +'img/redmi9.jpg')">
            <van-image lazy-load :src="my_get_img(item)">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <p class="two">
              {{item.goods?(item.goods[0]?(item.goods[0].name?item.goods[0].name:$url +'img/redmi9.jpg'):$url +'img/redmi9.jpg'):$url +'img/redmi9.jpg'}}
            </p>
            <p class="two" style="color:red">
              ￥{{item.goods?(item.goods[0].price?item.goods[0].price:$url +'img/redmi9.jpg'):$url +'img/redmi9.jpg'}}
            </p>
          </van-grid-item>

          <van-grid-item>
            <van-grid :column-num="2" :center="false">
              <van-grid-item v-for="(value,index1) in (item.goods?(item.goods.slice(1,5)):'')" :key="index1+'s'"
                @click="to_shopping(value)">
                <van-image lazy-load :src="value.imgs[0]?value.imgs[0].url:$url +'img/redmi9.jpg'">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
                <p class="one">{{value.name}}</p>
                <p class="one" style="color:red">￥{{value.price}}</p>
              </van-grid-item>
            </van-grid>
          </van-grid-item>
        </van-grid>
      </div>
      <h4>更多</h4>

      <lazy-component>
        <van-grid :column-num="2" :gutter="10">
          <van-grid-item v-for="(value,index) in data" :key="index" @click="to_shopping(value)">
            <van-image lazy-load :src="value.imgs[0]?value.imgs[0].url:$url +'img/redmi9.jpg'">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <p class="two">{{value.name}}</p>
            <p class="two" style="color:red">￥{{value.price}}</p>
          </van-grid-item>
        </van-grid>
      </lazy-component>
      <van-popup v-model="show" position="right" :style="{ width: '100%',height:'101%' }">
        <shopping v-on:exit="show=false" :data_base='form'></shopping>
      </van-popup>
    </div>
  </div>
</template>

<script>
import Shopping from "./shopping.vue";

export default {
  components: { Shopping },
  data() {
    return {
      value: "",
      data: [],
      list: [],
      show: false,
      form: "",
    };
  },

  methods: {
    //轮播图 图片加载
    lunbo_get(item) {
      if (
        item.goods &&
        item.goods[0] &&
        item.goods[0].imgs &&
        item.goods[0].imgs[0]
      ) {
        return item.goods[0].imgs[0].url;
      } else {
        return this.$url + "img/redmi9.jpg";
      }
    },
    my_get_img1(item) {
      if (
        item.goods &&
        item.goods[3] &&
        item.goods[3].imgs &&
        item.goods[3].imgs[0]
      ) {
        return item.goods[3].imgs[0].url;
      } else {
        return this.$url + "img/redmi9.jpg";
      }
    },
    //图片加载
    my_get_img(item) {
      if (
        item.goods &&
        item.goods[0] &&
        item.goods[0].imgs &&
        item.goods[0].imgs[0]
      ) {
        return item.goods[0].imgs[0].url;
      } else {
        return this.$url + "img/redmi9.jpg";
      }
    },
    //搜索按钮
    cat() {
      let search = { text: this.value };
      search = JSON.stringify(search);
      localStorage.setItem("search", search);
      this.$router.push("/search");
    },
    //数据商品数据获取
    getDate() {
      let myurl = this.$url + "goods_read";
      this.axios.post(myurl).then((res) => {
        let a = res.data.data;
        a = a.replace(/\\r\\n/g, "");
        a = a.replace(/\\/g, "");
        a = a.replace(/:"\[/g, ":[");
        a = a.replace(/\]"/g, "]");
        a = a.replace(/:"{/g, ":{");
        a = a.replace(/}"/g, "}");
        a = JSON.parse(a);
        this.data = a;
        for (let j = 0; j < this.list.length; j++) {
          let b = [];
          for (let i = 0; i < a.length; i++) {
            if (a[i].classify == this.list[j].name) {
              b.push(a[i]);
            }
          }
          //响应式
          let tmp_goods = this.list[j];
          tmp_goods.goods = b;
          this.$set(this.list, j, tmp_goods);
        }
      });
    },
    to_shopping(a) {
      this.form = a;
      this.show = true;
    },
    to_class(a) {
      this.$router.push({ name: "classify", params: { activeKey: a } });
    },
  },
  created() {
    //读取分类信息
    console.log("created调用了")
    if (this.list != [] && this.data != []) {
      let myurl = this.$url + "classifys_read";
      this.axios.post(myurl).then((res) => {
        let a = res.data.data;
        a = a.replace(/\\/g, "");
        a = a.replace(/:"\[/g, ":[");
        a = a.replace(/\]"/g, "]");
        a = a.replace(/:"{/g, ":{");
        a = a.replace(/}"/g, "}");
        a = JSON.parse(a);
        for (let i = 0; i < a.length; i++) {
          let c = {};
          c.par = [];
          c.name = a[i].name;
          for (let j = 0; j < a[i].ico.length; j++) {
            let b = {};
            b.ico = a[i].ico[j];
            b.text1 = a[i].text1[j];
            b.text2 = a[i].text2[j];
            c.par.push(b);
          }
          this.list.push(c);
        }
        this.getDate();
      });
    }
  },
  mounted() {
    let a = document.querySelector(".van-search").offsetHeight;
    document.querySelector(".center").style.top = a + "px";
    this.$nextTick(function () {
      this.$forceUpdate();
    });
  },
  // beforeRouteEnter(to, from, next) {
  //   console.log(to.query.activeKey - 0);
  //   console.log(from);
  //   console.log(next);
  //   next();
  // },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
img {
  width: 50%;
}
.one {
  font-size: 10px;
  margin: 0;
  text-align: center;
}
.two {
  font-size: 15px;
  margin: 0;
  text-align: center;
}

.van-search {
  position: fixed;
  top: 0;
  width: 100%;
  height: 8%;
  z-index: 99;
}
.center {
  position: relative;
}
.my-swipe .van-swipe-item[data-v-957c9522] {
  line-height: 0%;
}
.home {
  height: 100%;
  overflow: auto;
}
.home::-webkit-scrollbar {
  display: none;
}
</style>